<template>
	<view class="container-box">
		<view class="home-bg">
			<image src="../../static/home.png" style="width: 100%;height: 100%;"></image>
		</view>
		<view style="margin-top: -800rpx;position: relative; " :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="search-box" @click="searchTop">
				<image src="../../static/search.png" class="search-icon"></image>
				<view class="search-text">搜索标题、医生姓名查询更多内容</view>
			</view>
			<tn-tabs :list="scrollList" :current="current" activeColor="#333333" inactiveColor="#666666"
				v-if="liveTypeId==='23'" :activeItemStyle="{'font-weight': '600',
			'font-size': '36rpx'}" :inactiveItemStyle="{'font-size': '32rpx'}" gutter="36" :showBar='false' @change="tabChange">
			</tn-tabs>
			<view class="content-bg" style="background: linear-gradient( 180deg, #ffffff00 0%, #F8F8F8 100%);">
				<image class="content-bg-img" src="../../static/ygbg.png"></image>
				<view class="title">
					<view class="title-text"><span style="color: #00C8C8;">直播</span>预告</view>
					<view class="title-left" @click="allLive">查看全部<text class="tn-icon-right"></text></view>
				</view>
				<preview-list :dataList="liveData" @refreshLive="getlive"></preview-list>
				<tn-load-more class="load-more" status="loading" loadingIconType="flower" v-if="liveLoading">
				</tn-load-more>
				<view class="no-live" v-if="liveData.length == 0 && !liveLoading">
					<view class="no-live-text"><text class="tn-icon-live-stream"
							style="font-size: 40rpx;"></text>当前没有待直播内容
					</view>
					<view class="no-live-more" @click="liveMore">去看历史内容</view>
				</view>
			</view>
			<view class="content-bg" style="background-color: #e1efff;">
				<!-- style="height: 868rpx;" -->
				<image class="content-bg-img" src="../../static/zbhk.png"></image>
				<view class="title" v-if="liveTypeId==='20' || liveTypeId==='23'">
					<view class="title-text">直播回看</view>
					<view class="title-left" @click="liveMore">全部<text class="tn-icon-right"></text></view>
				</view>
				<live-list :dataList="homeLiveContent" v-if="liveTypeId==='20'"></live-list>
			</view>
			<view class="content-bg">
				<view class="title" v-if="liveTypeId==='20'">
					<view class="title-text">微课堂</view>
					<view class="title-left" @click="searchMore">全部<text class="tn-icon-right"></text></view>
				</view>
				<!-- v-if="liveTypeId==='21'" -->
				<view class="title" style="padding: 0 30rpx 0 0; width: 100%;" v-if="liveTypeId==='21'">
					<!-- <view class="title-text">更多推荐</view> -->
					<tn-tabs :list="contentTabList" :current="contentTabCurrent" activeColor="#333333"
						inactiveColor="#666666" :activeItemStyle="{'font-weight': '600',
					'font-size': '36rpx'}" :inactiveItemStyle="{'font-size': '32rpx'}" gutter="36" :showBar='false'
						@change="contentTabChange">
					</tn-tabs>
					<view class="title-left" @click="searchMore">全部<text class="tn-icon-right"></text></view>
				</view>
				<list :dataList="content" v-if="contentTabCurrent===0"></list>
				<live-list :dataList="liveContent" v-if="contentTabCurrent===1"></live-list>
			</view>

			<!-- nomore loading -->
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more>
			<!-- </scroll-view> -->
			<view class="bottom-num">前日浏览量：{{pageViews.dayViews}} 总浏览量：{{pageViews.viewsTotal}}</view>
		</view>


	</view>
</template>

<script>
	import {
		getContentsByTag,
		getWxOpenId,
		getTagList,
		getBannerList,
		getLiveList,
		getAllLiveList,
		getPageViews
	} from '@/util/index.js'
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				isRefreshing: false, // 是否正在刷新
				scrollTop: 0, // 滚动位置
				scrollHeight: 0, // 滚动区域高度
				startY: 0, // 触摸开始Y坐标
				current: '',
				tagId: '', //标签ID 
				bannerList: [],
				scrollList: [],
				contentTabList: [{
					name: '微课程',
					id: 1
				}, {
					name: '直播回看',
					id: 2
				}],
				contentTabCurrent: 0,
				liveContent: [],
				content: [],
				liveData: [],
				homeLiveContent: [], //大医说-直播回看 6条
				liveLoading: true,
				pageViews: {
					dayViews: '',
					viewsTotal: ''
				}
			};
		},
		props: {
			liveTypeId: {
				type: String,
				default: ''
			}
		},
		mounted() {
			this.initScrollHeight()
			this.getTab()
			this.getBanner()
			if (this.liveTypeId == '20') {
				this.getlive()
				this.getHomeLiveData()
			}
			if (this.liveTypeId == '23') {
				this.contentTabCurrent = 1
				this.getLiveData()
			}
			this.getHomeViewData()
		},
		methods: {
			// 初始化滚动区域高度
			initScrollHeight() {
				const systemInfo = uni.getSystemInfoSync()
				this.scrollHeight = systemInfo.windowHeight - 270
				console.log(systemInfo.windowHeight)
			},
			// 上拉加载更多
			loadMore() {
				if (this.loadStatus == 'noMore') return
				this.loadStatus = 'loading'
				this.page++
				this.getData()
			},
			//获取直播列表
			getlive() {
				getLiveList({
					page: 1,
					limit: 5,
					tagId: this.tagId,
					liveTypeId: this.liveTypeId == '20' ? '' : this.liveTypeId
				}).then((res) => {
					this.liveLoading = false
					console.log('????')
					console.log(res)
					this.liveData = res.list
				})
			},

			tabChange(index) {
				this.current = index
				this.tagId = this.scrollList[index].id
				this.page = 1
				this.content = []
				this.liveContent = []
				this.liveData = []
				this.loadStatus = 'loading'
				this.getData()
				this.getLiveData()
				this.getlive()
			},
			contentTabChange(index) {
				this.contentTabCurrent = index
				this.loadStatus = 'loading'
				if (index == 0) {
					this.page = 1
					this.content = []
					this.getData()
				} else {
					this.page = 1
					this.liveContent = []
					this.getLiveData()
				}
			},
			getData() {
				getContentsByTag({
					page: this.page,
					limit: this.limit,
					tagId: this.liveTypeId == '20' ? '' : this.tagId,
					liveTypeId: this.liveTypeId == '20' ? '' : this.liveTypeId,
					orderType: this.liveTypeId == '20' ? '0' : '',
				}).then((res) => {
					if (this.content.length < res.total) {
						this.content = this.content.concat(res.list)
					} else {
						this.loadStatus = 'noMore'
					}
				})
			},
			getLiveData() {
				getAllLiveList({
					page: this.page,
					limit: this.limit,
					liveStatus: '2',
					liveTypeId: this.liveTypeId == '20' ? '' : this.liveTypeId,
					tagId: this.tagId
				}).then((res) => {
					if (this.liveContent.length < res.total) {
						this.liveContent = this.liveContent.concat(res.list)
					} else {
						this.loadStatus = 'noMore'
					}
				})
			},
			getHomeLiveData() {
				getAllLiveList({
					page: 1,
					limit: 6,
					liveStatus: '2',
					orderType: 0
				}).then((res) => {
					this.homeLiveContent = res.list
				})
			},
			getHomeViewData() {
				getPageViews().then((res) => {
					this.pageViews = res
				})
			},
			getTab() {
				getTagList({
					page: 1,
					limit: 100,
					liveTypeId: this.liveTypeId,
					status: '1',
					shouType: this.vuex_user.type == '2' ? '0' : '1'
				}).then((res) => {
					let list = res.list.map(o => {
						return {
							name: o.name,
							id: o.id
						}
					})
					this.scrollList = list

					if (this.liveTypeId == '23') {
						this.tagId = list[0].id || ''
					}
					this.getData()
					this.getlive()
				})
			},
			getBanner() {
				getBannerList({
					page: 1,
					limit: 100,
					liveTypeId: this.liveTypeId
				}).then((res) => {
					this.bannerList = res.list.map(o => {
						return {
							image: o.contentPictureVOList[0].pictureUrl,
							// image:o.coverImage,
							id: o.id
						}
					})
				})
			},
			handleBanner(e) {
				const id = this.bannerList[e].id
				uni.navigateTo({
					url: `/articleVideo/swiper-details/swiper-details?id=${id}`
				})
			},
			toDetails(v) {
				let url;
				switch (v.contentType) { //0:图文,1视频,2:轮播图
					case '0':
						url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
						break;
					case '1':
						url = `../../articleVideo/video-details/video-details?id=${v.id}`
						break;
					default:
						url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			searchMore() {
				switch (this.contentTabCurrent) {
					case 0: //只有大医说是跳转到只有直播预告的查询页面
						uni.navigateTo({
							url: '../../templatePage/search/search'
						})
						break;
					default: //其余查询全部
						uni.navigateTo({
							url: `../../articleVideo/live/live?liveTypeId=${this.liveTypeId}&tagId=${this.tagId}`
						})
						break;
				}
			},
			searchTop() {
				uni.navigateTo({
					url: '../../templatePage/search/search'
				})
			},
			liveMore() {
				uni.navigateTo({
					url: `../../articleVideo/live/live?liveTypeId=${this.liveTypeId}&tagId=${this.tagId}`
				})
			},
			allLive() {
				uni.navigateTo({
					url: `../../articleVideo/previewLive-list/previewLive-list?liveTypeId=${this.liveTypeId}&tagId=${this.tagId}`
				})
				return
				switch (this.liveTypeId) {
					case '20': //只有大医说是跳转到只有直播预告的查询页面
						uni.navigateTo({
							url: '../../articleVideo/previewLive-list/previewLive-list'
						})
						break;
					default: //其余查询全部
						uni.navigateTo({
							url: '../../articleVideo/live/live'
						})
						break;
				}

			}
			// allLive() {
			// 	uni.navigateTo({
			// 		url: '../../articleVideo/live/live'
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	.container-box {
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 50rpx;
	}

	.home-bg {
		width: 100%;
		height: 800rpx;
	}

	.search-box {
		width: 692rpx;
		height: 72rpx;
		margin: auto;
		background-color: #FFFFFF !important;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		font-size: 28rpx;
		border: 1rpx solid #00D9D0;

		.search-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		.search-text {
			color: #999999;
			text-align: left;
		}
	}


	/* 文章内容 start*/
	.waterfall-container {
		column-count: 2;
		/* 列数 */
		column-gap: 0;
		/* 列间距 */
		width: 100%;
		// background-color: #eeeeee;
	}

	.waterfall-item {
		background-color: #FFFFFF;
		break-inside: avoid;
		/* 防止内容断裂到下一列 */
		// margin-bottom: 15rpx;
		// border-radius: 8rpx;
		overflow: hidden;
		// box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		// background: white;
	}

	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #82B2FF;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 30rpx;
			padding-right: 5rpx;
		}
	}

	.image-music {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	.scroll-view {
		height: calc(100vh - (580rpx + env(safe-area-inset-bottom)));
		width: 100%;
	}

	.load-more {
		padding: 20rpx;
	}

	.content-bg {
		width: 686rpx;
		margin:30rpx auto 0;
		height: auto;
		overflow: hidden;
		position: relative;
		padding-top: 20rpx;
		// background-color: #cffdfa;
		border-radius: 20rpx;
		.content-bg-img {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			height: 868rpx;
			top: 0;
			z-index: 0;
		}
	}

	/* 文章内容 end*/
	.title {
		width: 100%;
		height: 88rpx;
		line-height: 87rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		position: relative;
		padding: 0 16rpx 0 154rpx;

		.title-text {
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
		}


		.title-left {
			font-size: 32rpx;
			color: #666666;
			display: flex;
			align-items: center;
		}
	}

	.no-live {
		width: 100%;
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #eeeeee;
		padding: 0 30rpx;
		justify-content: space-between;
		color: #9b9b9b;

		.no-live-more {
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
			background-color: #38c7c0;
			color: #FFFFFF;
		}

		.no-live-text {
			display: flex;
			align-items: center;
		}
	}

	.bottom-num {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #bfbfbf;
	}
</style>
